
<template>
  <div class="login-container" ref="containerRef">
    <el-card class="login-box">
      <div class="login-header">
        <div class="logo-container" ref="logoRef">
          <svg
            class="animated-text"
            preserveAspectRatio="xMidYMid meet"
            style="width: 100%; height: 100%"
            viewBox="41.8 35.90001 205.50002 94.1"
            xmlns="http://www.w3.org/2000/svg"
          >
            <defs>
              <linearGradient
                id="logoGradient"
                x1="0%"
                y1="0%"
                x2="100%"
                y2="100%"
              >
                <stop offset="0%" style="stop-color: #ff6b6b" />
                <stop offset="50%" style="stop-color: #4ecdc4" />
                <stop offset="100%" style="stop-color: #45b7d1" />
              </linearGradient>
            </defs>
            <path
              d="M 108.600006 76.100006 Q 108.600006 92.8 99.4 108.50001 Q 96.2 114.00001 90.4 114.00001 Q 84.100006 114.00001 81.7 106.700005 Q 80.6 103.40001 79.95 99.450005 Q 79.3 95.50001 79.1 94.50001 Q 78.3 96.100006 76.25 101.15001 Q 74.2 106.200005 72.8 108.80001 Q 70.7 113.00001 66.8 113.00001 Q 63.9 113.00001 61.6 110.80001 Q 59.7 108.80001 59.2 103.00001 Q 59.1 101.100006 58.95 99.50001 Q 58.8 97.90001 58.8 96.50001 Q 58.8 95.100006 59.1 93.100006 Q 59.4 91.100006 59.75 89.3 Q 60.1 87.50001 60.9 85.00001 Q 61.7 82.50001 62.3 80.75001 Q 62.9 79.00001 64.05 76.20001 Q 65.2 73.40001 65.8 71.95001 Q 66.4 70.50001 67.75 67.600006 Q 69.1 64.70001 69.6 63.600006 Q 70.9 60.500008 72.9 56.500008 Q 66.4 63.400005 59 66.00001 Q 56.9 66.70001 54.75 66.70001 Q 52.6 66.70001 51.3 65.00001 Q 50 63.300007 50 60.20001 Q 50 57.100006 53.85 53.500008 Q 57.7 49.90001 62.5 47.800003 Q 67.3 45.700005 71.15 45.700005 Q 75 45.700005 78.35 48.200005 Q 81.7 50.700005 81.7 54.800003 Q 81.7 56.300007 80.55 59.400005 Q 79.4 62.500008 76.1 70.600006 Q 68.9 88.50001 66.5 98.8 Q 66.3 99.600006 66.3 100.350006 Q 66.3 101.100006 67 101.100006 Q 70 101.100006 79 74.00001 Q 78.3 73.100006 78.3 72.20001 Q 78.3 70.90001 80.7 70.90001 Q 85.600006 70.90001 87.3 71.100006 Q 89 71.3 89 72.20001 Q 89 73.100006 88.3 73.600006 Q 87.2 85.3 87.2 89.3 Q 87.2 93.3 88 99.600006 Q 88.8 105.90001 90.5 105.90001 Q 92 105.90001 93.5 102.200005 Q 100.2 87.50001 100.2 73.350006 Q 100.2 59.20001 92.8 47.200005 Q 91.7 45.600006 91.7 44.100006 Q 91.7 41.700005 95.2 41.700005 Q 98.7 41.700005 100.5 44.800003 Q 108.600006 59.400005 108.600006 76.100006 ZM 56.5 54.90001 Q 55.4 56.000008 55.4 56.900005 Q 55.4 57.800007 56.6 57.800007 Q 59.9 57.800007 66.5 50.500008 Q 59.8 51.600006 56.5 54.90001 Z"
              style="
                --path-length: 651.00885;
                fill: transparent;
                stroke: url(#logoGradient);
              "
            />
            <path
              d="M 163.40001 47.800003 Q 173.90001 47.800003 177.3 56.500008 Q 177.90001 58.20001 177.90001 59.900005 Q 177.90001 64.600006 173.70001 68.95001 Q 169.5 73.3 161.65001 80.00001 Q 153.8 86.70001 150.6 89.8 Q 143.1 97.00001 143.1 101.600006 Q 143.1 104.40001 146.8 104.40001 Q 154.2 104.40001 170.40001 101.700005 L 171.3 101.600006 Q 172.6 101.600006 172.6 102.90001 Q 172.6 104.200005 172 105.80001 Q 169.40001 114.40001 152.5 114.40001 Q 146.7 114.40001 143 113.00001 Q 139.3 111.600006 137.3 107.00001 Q 136.1 104.40001 136.1 101.50001 Q 136.1 95.700005 141.05 89.8 Q 146 83.90001 155.2 74.15001 Q 164.40001 64.40001 167 61.350006 Q 169.6 58.300007 169.6 57.500008 Q 169.6 55.800003 162.5 55.800003 Q 158.8 55.800003 151.8 56.400005 Q 146.1 59.800007 137.1 59.800007 Q 134.6 59.800007 133.45 59.050007 Q 132.3 58.300007 132.3 55.500008 Q 132.3 52.700005 133.05 50.90001 Q 133.8 49.100006 136.85 47.750008 Q 139.90001 46.40001 146.65001 44.000008 Q 153.40001 41.600006 154.8 41.600006 Q 156.2 41.600006 156.75 42.350006 Q 157.3 43.100006 157.90001 44.800003 L 158.6 46.500008 Q 159.2 47.90001 160.5 47.90001 L 163.40001 47.800003 Z"
              style="
                --path-length: 388.22067;
                fill: transparent;
                stroke: url(#logoGradient);
              "
            />
          </svg>
        </div>
        <h2>登录</h2>
        <p class="welcome-text">请输入您的账号密码</p>
      </div>

      <el-form
        :model="formData"
        :rules="rules"
        ref="loginFormRef"
        class="login-form"
      >
        <el-form-item prop="username">
          <el-input
            v-model="formData.username"
            placeholder="请输入用户名"
            autocomplete="username"
            size="large"
          >
            <template #prefix>
              <el-icon><User /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input
            v-model="formData.password"
            type="password"
            placeholder="请输入密码"
            size="large"
            show-password
            autocomplete="current-password"
          >
            <template #prefix>
              <el-icon><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <div class="remember-forgot">
          <el-checkbox v-model="rememberMe">记住我</el-checkbox>
          <el-link type="primary" :underline="false">忘记密码？</el-link>
        </div>

        <el-form-item>
          <el-button
            type="primary"
            @click="handleLogin"
            class="login-button"
            :loading="loading"
            size="large"
          >
            {{ loading ? "登录中..." : "登录" }}
          </el-button>
        </el-form-item>

        <div class="register-link">
          还没有账号？
          <router-link to="/register">立即注册</router-link>
        </div>

        <div class="other-login">
          <div class="divider">
            <span>其他登录方式</span>
          </div>
          <div class="social-icons">
            <el-button circle class="social-icon">
              <el-icon><Message /></el-icon>
            </el-button>
            <el-button circle class="social-icon">
              <el-icon><Apple /></el-icon>
            </el-button>
            <el-button circle class="social-icon">
              <el-icon><ChromeFilled /></el-icon>
            </el-button>
          </div>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useUserStore } from "@/types/store/user";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import {
  User,
  Lock,
  Message,
  Apple,
  ChromeFilled,
} from "@element-plus/icons-vue";

import type { FormInstance } from 'element-plus'


const userStore = useUserStore();
const router = useRouter();
const route = useRoute();
const loading = ref(false);
const loginFormRef = ref<FormInstance | null>(null);
const rememberMe = ref(false);
const containerRef = ref(null);
const logoRef = ref(null);

const formData = ref({
  username: "",
  password: "",
});

const rules = {
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" },
  ],
};

const handleLogin = async () => {
  if (!loginFormRef.value) return;
  
  try {
    await loginFormRef.value.validate();
    loading.value = true;

    await userStore.login({
      username: formData.value.username,
      password: formData.value.password
    });

    ElMessage.success('登录成功');
    
    // 获取重定向地址
    const redirect = route.query.redirect as string || '/';
    router.push(redirect);
  } catch (error: any) {
    console.error('登录失败:', error);
    ElMessage.error(error.message || '登录失败，请检查用户名和密码');
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.login-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #212121;
  overflow: hidden;
}

.login-box {
  width: 400px;
  padding: 40px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 0.6)
  );
  backdrop-filter: blur(10px);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.18);
  animation: slideUp 0.6s ease-out;
}

/* 输入框样式 */
:deep(.el-input__wrapper) {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 0.6)
  ) !important;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
  backdrop-filter: blur(5px) !important;
  box-shadow: 0 2px 10px rgba(31, 38, 135, 0.07) !important;
  transition: all 0.3s ease;
}

/* 输入框焦点效果 */
:deep(.el-input__wrapper.is-focus) {
  border-image: linear-gradient(45deg, #ff6b6b, #4ecdc4) 1 !important;
  box-shadow: 0 4px 15px rgba(31, 38, 135, 0.1) !important;
}

/* 按钮渐变效果 */
:deep(.el-button--primary) {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4) !important;
  border: none !important;
  transition: all 0.3s ease;
}

:deep(.el-button--primary:hover) {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(78, 205, 196, 0.4);
}

/* 标题渐变文字效果 */
.title {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip: text;
  background-clip: text;
  color: #212121;
  font-weight: bold;
  margin-bottom: 20px;
}

.login-header {
  text-align: center;
  margin-bottom: 40px;
}

.logo {
  margin-bottom: 20px;
  animation: rotate 20s linear infinite;
}

.welcome-text {
  color: #909399;
  margin-top: 10px;
  font-size: 14px;
}

.login-form {
  margin-top: 30px;
}

.login-button {
  width: 100%;
  height: 44px;
  font-size: 16px;
  margin-top: 10px;
  background: linear-gradient(120deg, #3699ff, #8364e8);
  border: none;
  transition: transform 0.3s ease;
}

.login-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(54, 153, 255, 0.3);
  background: linear-gradient(120deg, #2d87e4, #7251d5);
  border: none;
}

.remember-forgot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.other-login {
  margin-top: 30px;
}

.divider {
  display: flex;
  align-items: center;
  margin: 20px 0;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e4e7ed;
}

.divider span {
  padding: 0 10px;
  color: #909399;
  font-size: 14px;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.social-icon {
  font-size: 20px;
  color: #606266;
  transition: all 0.3s ease;
}

.social-icon:hover {
  transform: translateY(-3px);
  color: #409eff;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Element Plus 样式覆盖 */
.el-input {
  --el-input-hover-border-color: #8364e8;
  --el-input-focus-border-color: #8364e8;
}

.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #8364e8;
  border-color: #8364e8;
}

.el-form-item {
  margin-bottom: 25px;
}

.logo-container {
  width: 180px;
  height: 80px;
  margin: 0 auto 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo {
  width: 64px;
  height: 64px;
}


.animated-text {
  max-width: 100%;
  height: auto;
  transform: scale(1.2);
}

.animated-text path {
  fill: transparent;
  stroke: url(#logoGradient);
  stroke-width: 2;
  stroke-dasharray: var(--path-length);
  stroke-dashoffset: var(--path-length);
  animation: logo-anim 15s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transform-origin: center;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 保持原有的动画效果变 */
@keyframes logo-anim {
  0% {
    stroke-dashoffset: var(--path-length);
    stroke-dasharray: var(--path-length) var(--path-length);
    opacity: 0;
    fill: transparent;
  }

  5% {
    opacity: 1;
    stroke-dashoffset: var(--path-length);
    stroke-dasharray: var(--path-length) var(--path-length);
  }

  50% {
    stroke-dashoffset: 0;
    stroke-dasharray: var(--path-length) var(--path-length);
    fill: transparent;
  }

  60% {
    stroke-dashoffset: 0;
    stroke-dasharray: var(--path-length) var(--path-length);
    fill: currentColor;
    opacity: 1;
  }

  75% {
    stroke-dashoffset: 0;
    stroke-dasharray: var(--path-length) var(--path-length);
    fill: currentColor;
    opacity: 1;
  }

  85% {
    stroke-dashoffset: 0;
    stroke-dasharray: var(--path-length) var(--path-length);
    fill: transparent;
    opacity: 1;
  }

  95% {
    stroke-dashoffset: var(--path-length);
    stroke-dasharray: var(--path-length) var(--path-length);
    fill: transparent;
    opacity: 1;
  }

  100% {
    stroke-dashoffset: var(--path-length);
    stroke-dasharray: var(--path-length) var(--path-length);
    fill: transparent;
    opacity: 0;
  }
}

/* 确保在暗色模式下的颜色正确 */
@media (prefers-color-scheme: dark) {
  .animated-text path {
    stroke: currentColor;
  }
}

/* 添加注册链接样式 */
.register-link {
  text-align: center;
  margin-top: 20px;
  color: #909399;
}

.register-link a {
  color: #4ecdc4;
  text-decoration: none;
  margin-left: 5px;
}

.register-link a:hover {
  text-decoration: underline;
}

/* 优化动画性能 */
.animated-logo {
  width: 100%;
  height: 100%;
  will-change: transform;
  transform: translateZ(0);
}
</style>
